$(document).ready(function () {

    let local = 0;
    $(".table tbody tr input[type=checkbox]").on("click", function (event) {
        const table = $(this).parents("table");
        const index = table.find("input").index($(this));
        let min = Math.min(local, index);
        let max = Math.max(local, index);
        while (event.shiftKey && min <= max) {
            table.find("input").eq(min++).prop("checked", $(this).prop("checked"));
        }
        local = index;
    });

    $(".table tbody tr").attr("draggable", true);
    $(".table").on("dragover", function (event) {
        event.preventDefault();
    });

    let parents = null;
    let context = [];
    $(".table tbody tr").on("dragstart", function () {
        parents = $(this).parents("table");
        if ($(this).find("input[type=checkbox]").prop("checked"))
            context = $(this).parents("table").find("tbody tr").map(function () {
                if ($(this).find("input[type=checkbox]").prop("checked"))
                    return $(this);
            }).get();
        else
            context[0] = $(this);
    });

    $(".table").on("drop", function (event) {
        event.preventDefault();
        for (let i = 0; i < context.length; i++) {
            context[i].find("input[type=checkbox]").prop("checked", false);
        }

        if ($(this).attr("id") !== parents.attr("id")) {
            const id = $(this).attr("id");
            $(this).append(context);

            parents.find("tbody tr").each(function (i) {
                $(this).find("td:eq(1)").text(i + 1);
                $(this).find("td input[name=no]").val(i + 1);
            });
            $(this).find("tbody tr").each(function (i) {
                $(this).find("td:eq(1)").text(i + 1);
                $(this).find("td input[name=no]").val(i + 1);
                $(this).find("td input[name=master]").val(id);
            });
        }
    });

    $("#btn1").on("click", function () {
        $("#form1").submit();
    });

});